<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-04 19:35:38
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-12-21 16:19:57
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="approval modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:1440px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form *ngIf="active" #bopForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>审批维护</span>
                        <label style="margin-left: 200px;margin-right: 10px;">审批流:</label>
                        <p-dropdown (onChange)="onChange($event.value)" name="approval" [options]="approvalOption" [(ngModel)]="approval">
                        <ng-template let-select pTemplate="selectedItem">
                            <span style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                        </ng-template>
                        <ng-template let-select pTemplate="select">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 175px; ">{{select.label}}
                                </div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 630px!important;overflow: auto;">
                    <div class="flow">
                        <div class="flow-item">
                            <div class="flow-start">
                                <div class="text">流程开始</div>
                                <div class="ico"></div>
                                <div class="flow-add">
                                    <div class="flow-add__plus"><i style="font-size: 2rem;"
                                            class="pi pi-plus-circle"></i></div>
                                </div>
                            </div>
                            <div class="content">
                                <div class="flow-node" *ngFor="let item of approvalForm ; let index=index">
                                    <div class="flow-content">
                                        <div class="title">
                                            <i class="pi pi-user"></i>
                                            <span style="margin-left: .625rem;">节点:{{item.label}}</span>
                                            <i class="pi pi-times"
                                                style="float: right;cursor: pointer"></i>
                                        </div>
                                        <div class="content">
                                            <span>人员：{{item.personName}}</span>
                                            <i style="cursor: pointer;" (click)="showDetail(item,index)"
                                                class="pi pi-chevron-right"></i>
                                        </div>
                                    </div>
                                    <div class="flow-add">
                                        <div class="flow-add__plus"><i style="font-size: 2rem;"
                                                class="pi pi-plus-circle"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="flow-end">
                                <div class="ico"></div>
                                <div class="text">流程结束</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button (onClick)="save()" class="btn btn-primary" [disabled]="!bopForm.form.valid" [buttonBusy]="saving"
                        [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>送审</span></button>
                </div>
            </form>
        </div>
    </div>
    <!-- 节点弹窗 -->
    <p-sidebar [(visible)]="nodeFlag" position="right" (onHide)="onHide($event)"
        [style]="{width:'30em'}">
        <h3 style="font-weight:normal;color: #888888;">审批</h3>
        <hr style="border: 1px solid #DDDDDD;width: 100%;">
        <form *ngIf="actived" #nodeForm="ngForm" novalidate autocomplete="off">
            <div class="modal-boday">
                <div class="form-group" style="display: flex;">
                    <label style="margin-right: 20px; margin-top: 5px;" for="label">节点名称*：</label>
                    <input style="width: 200px;" id="formLabel" name="formLabel" #nodeLabelInput="ngModel" type="text" class="form-control"
                        [(ngModel)]="deatilForm.label" disabled maxlength="256" />
                </div>
                <div class="form-group">
                    <p-triStateCheckbox disabled name="choose" [(ngModel)]="deatilForm.choose" label="审批角色"></p-triStateCheckbox>
                </div>
                <div class="form-group">
                    <label for="approvalRole" style="margin-top: 7px;margin-right: 20px;">审批角色*：</label>
                    <p-dropdown disabled name="approvalRole" #approvalRoleSelect="ngModel"
                        [options]="approvalRoleOption" [(ngModel)]="deatilForm.approvalRole">
                        <ng-template let-select pTemplate="selectedItem">
                            <span style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                        </ng-template>
                        <ng-template let-select pTemplate="select">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 175px; ">{{select.label}}
                                </div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                </div>
                <div class="form-group" style="display: flex;">
                    <label style="margin-right: 28px; margin-top: 5px;" for="remark">角色备注：</label>
                    <input disabled style="width: 200px;" name="remark" type="text" class="form-control"
                        [(ngModel)]="deatilForm.remark" maxlength="256" />
                </div>
                <div class="form-group">
                    <label for="approvalPerson" style="margin-top: 7px;margin-right: 20px;">审批人员*：</label>
                    <p-dropdown filter="true" required name="approvalPerson" #approvalPersonSelect="ngModel"
                        [options]="approvalPersonOption" [(ngModel)]="deatilForm.approvalPerson">
                        <ng-template let-select pTemplate="selectedItem">
                            <span style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                        </ng-template>
                        <ng-template let-select pTemplate="select">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="margin-left: .5em;font-size:14px;float:right;margin-top:4px;width: 175px; ">{{select.label}}
                                </div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                    <validation-messages [formCtrl]="approvalPersonSelect"></validation-messages>
                </div>
            </div>
            <div class="modal-footer" style="justify-content: center;">
                <p-button label="取消" (onClick)="onHide($event)"></p-button>
                <p-button label="保存" [disabled]="!nodeForm.form.valid" (onClick)="saveNode()"></p-button>
            </div>
        </form>
    </p-sidebar>
</div>